<template>
  <div>
    <h1>司机管理</h1><hr>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="180">
        </el-table-column>
        <el-table-column
            prop="state"
            label="状态"
            width="100">
          <template v-slot="scope">
            {{scope.row.state==1?'空闲':'繁忙'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="openAddDriver()">新增</el-button>
            <el-button
              size="mini"
              type="success"
              @click="openUpdateDriver(scope.row.id)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteDriver(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
<!--  新增司机的嵌套表单 -->
    <div>
      <el-dialog title="新增/编辑司机" :visible.sync="dialogformadddriver">
        <el-form :model="addformDriver">
          <el-form-item label="司机名称" :label-width="formLabelWidth">
            <el-input v-model="addformDriver.name" placeholder="请输入司机名称" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="司机电话" :label-width="formLabelWidth">
            <el-input v-model="addformDriver.phone" placeholder="请输入司机电话" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="司机头像" :label-width="formLabelWidth">
            <el-upload
              :action="action"
              v-model="addformDriver.avatarList"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="wl-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="cancalAddDriver">取消</el-button>
          <el-button type="primary" @click="saveOrUpdateDriver">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "SijiView",
  data(){
    return{
      action:"http://172.20.10.5:8003/api/sys-crop/uploadDriverAvatar",
      tableData:[],
      dialogformadddriver:false,
      formLabelWidth:'120px',
      addformDriver:{},
      dialogImageUrl:'',
      dialogVisible:false
    }
  },methods:{
    handleRemove(file,fileList){
      console.log(file,fileList);
    },
    handlePictureCardPreview(file){
      this.dialogImageUrl=file.url;
      this.dialogVisible=true;
    },
    /*根据id去查询司机里的单条数据*/
    getByIdOneDriver(id){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/getByIdOneDriver?id="+id).then(res=>{
        console.log("数据为：=="+res.data);
        this.addformDriver=res.data;
      })
    },
    /*打开编辑司机嵌套表单*/
    openUpdateDriver(id){
      this.dialogformadddriver=true
      console.log("司机的id==="+id)
      this.getByIdOneDriver(id);
    },
    /*删除司机*/
    deleteDriver(id){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/deleteDriver?id="+id).then(res=>{
        if(res.data=='success'){
          this.$message.success("删除成功");
          this.driverList();
        }
        else{
          this.$message.error("删除失败！！！！！");
        }
      })
    },
    /*司机表单*/
    driverList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/getAllDeiversList").then(res=>{
        this.tableData=res.data
      })
    },/*新增司机*/
    saveOrUpdateDriver(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/addDriver",this.addformDriver).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功！！！！！！")
          this.dialogformadddriver=false;
          this.driverList();
        }else{
          this.$message.error("新增失败！！")
        }
      })
    },
    /*打开新增司机嵌套表单*/
    openAddDriver(){
      this.dialogformadddriver=true;
    },/*关闭添加司机嵌套表单*/
    cancalAddDriver(){
      this.dialogformadddriver=false
    },
  },created() {
      this.driverList();
  }
}
</script>

<style scoped>

</style>